<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {

        var tbl = $("#nasdaq_market_table");
        var obj = $.paramquery.tableToArray(tbl);

        var newObj = {             
            title: "Companies listed on the <b>NASDAQ</b>",
            resizable: true,             
            showBottom: false,
            selectionModel: {type:'cell', mode:'block'},
            dataModel: { data: obj.data, sortIndx: 0 },
            columnTemplate: {editable: false},
            colModel: obj.colModel
        };
        
        $.extend(newObj.colModel[0], { width: 220 });
        $.extend(newObj.colModel[1], { width: 100 });
        $.extend(newObj.colModel[2], { hidden: true });
        $.extend(newObj.colModel[3], {            
            render: function (ui) {
                var rowData = ui.rowData,
                    dataIndx = ui.dataIndx;

                rowData.pq_cellcls = rowData.pq_cellcls || {};
                if (rowData[4] < 0) {//if change is negative.
                    rowData.pq_cellcls[dataIndx] = 'yellow';
                    return "<img src='/Content/images/arrow-us-down.gif'/>&nbsp;" + rowData[3];
                }
                else { //if change >= 0
                    rowData.pq_cellcls[dataIndx] = 'pink';
                    return "<img src='/Content/images/arrow-us-up.gif'/>&nbsp;" + rowData[3];
                }
            }, width: 100
        });
        $.extend(newObj.colModel[4], { width: 120, editable: true });
        $.extend(newObj.colModel[5], { width: 120 });
        $.extend(newObj.colModel[6], { width: 166 });

        //update price cell when change cell is updated.
        newObj.cellSave = function (evt, ui) {
            if (ui.dataIndx == 4) {
                $(this).pqGrid("refreshCell", { rowIndx: ui.rowIndx, dataIndx: 3 });
            }
        };
        var $grid = $("#grid_render_cells").pqGrid(newObj);
    });
        
</script>    
</head>
<body>
ParamQuery Grid keeps the view separate from model (data), hence it offers callback function to render the cells differently from the underlying data. In the below example, the arrows displayed in the Price column are dependent upon corresponding values in Change column; if Change value is -ve, there is a down arrow otherwise there is an up arrow. 
Change column is editable.
<div id="grid_render_cells" style="margin:auto;"></div>

</body>

</html>
